<template>
	<view>
		<view class="padding30rpx">
			<label style="font-weight: bold;">共{{storData.length||0}}件宝贝</label>
			<view class="margin-top25rpx">
				<view class="term-flex dis align-items" v-for="(item,index) in storData" :key="index">
					<image class="term-flex-img" :src="item.imgName"></image>
					<view style="width: 70%;">
						<view class="term-flex-tit">
							{{item.name}}
						</view>
						<view class="dis" style="margin-top: 50rpx;">
							<view class="term-left">学习币：{{item.currency}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- end -->
		<view class="padding30rpx hui99 " style="width: 76%;">
			建议购买IBMG零商E学岗位会员及平台充值会员
			获取更多优惠。

		</view>
		<view class="padding30rpx" style="margin-top: 64rpx; margin-bottom: 60rpx;">
			<view class="line dis align-items" style="border-top:1rpx solid #dddddd ; padding-bottom: 30rpx;"
				@click="$mHelper.to('pages/study/choice/transaction/transaction?pid='+pid)">
				<view @click="buy">
					<view class="fontSize32rpx">购买该岗位年卡会员</view>
					<view class="hui99">购买该岗位年卡会员即可学习岗位相关所有内容</view>
				</view>
				<view style="margin-top: 15rpx;">
					<u-icon name="arrow-right" size="28" color="#999999"></u-icon>
				</view>
			</view>
			<view class="line dis" style="padding:  30rpx 0;" @click="$mHelper.to('pagesA/balance/balance')">
				<view>学习币充值</view>
				<u-icon name="arrow-right" size="28" color="#999999"></u-icon>
			</view>
		</view>

		<view class="padding30rpx buylist-bot dis align-items">
			<view class="buyhe dis align-items">
				<text>合计：</text>
				<view class="flexc align-items">
					<label>{{allPrice()}}</label>
					<image src="../../static/user/bi.png"></image>
				</view>

			</view>
			<view class="buybtn" @tap="show=true">提交订单</view>
		</view>
		<u-popup v-model="show" mode="center" width="500">
			<view class="popupBox">
				<view class="titles">IBMG零商e学云课堂</view>
				<view class="prices"><text>{{allPrice()}}</text>学习币</view>
				<view class="tishi">
					学习币余额支付
				</view>
			</view>
			<view class="u-flex choice-line">
				<view class="choice_open u-flex-1" @click="subimtOrder">确认支付</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				dataList: [{
						checked: 1,
						title: '美华裔医护人员感染新冠，病情严重多症状并发，说一...',
						img: 'https://pic2.zhimg.com/v2-bb8c86979f5f752b7635a198189d5e59_b.jpg',
						bi: 300,
						disabled: false
					},
					{
						checked: 2,
						title: '深圳六旬老汉不配合检疫检查还咬伤警察，获刑9个月...',
						img: 'https://pic1.zhimg.com/v2-4a9d2a6988de79ddf22e091f7fb5d8fc_b.jpg',
						bi: 520,
						disabled: false
					},
					{
						checked: 3,
						title: '丈夫从火葬场捡回家一只手，妻子看见直接被吓晕',
						img: 'https://pic1.zhimg.com/v2-46395f1a9192d36a35ec938ced7f7df0_b.jpg',
						bi: 780,
						disabled: false
					},

				],
				storData: [],
				pid: ''
			}
		},
		onLoad(option) {
			this.pid = option.pid || ''
			uni.getStorage({
				key: 'orderData',
				success: (e) => {
					this.storData = e.data
					console.log(e.data);
					// this.getOrderInfo()
				}
			})
		},
		methods: {
			subimtOrder() {
				let data = []

				this.storData.forEach(e => {
					data.push({
						"createBy": e.createBy || '',
						"createTime": e.createTime || '',
						"creationtime": e.creationtime || '',
						"currencys": e.currency || 0,
						"curriculumid": e.id || 0,
						"curriculumimg": e.imgName || '',
						"curriculumname": e.name || '',
						"id": 0,
						"params": {},
						"remark": e.remark || '',
						"searchValue": e.searchValue || '',
						"types": e.types || '',
						"updateBy": e.updateBy || '',
						"updateTime": e.updateTime || '',
					})
				})
				this.$http.post('app/CurrencyController/addUserCurriculum', JSON.stringify(data)).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '购买成功！',
							back: true
						})
					} else {
						this.$refs.uToast.show({
							title: res.message,
						})
					}
				})
			},
			//购买年卡会员
			allPrice() {
				let num = 0
				this.storData.forEach(e => {
					num += e.currency;

				})
				return num || '0'
			},
			// buy() {
			// 	console.log('51123')
			// 	this.show = true
			// },
			jie() {
				uni.navigateTo({
					url: '../pay/pay'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popupBox {
		text-align: center;

		.titles {
			margin-top: 40rpx;
			color: #333333;
			font-size: 34rpx;
			font-weight: 550;

		}

		.prices {
			font-size: 25rpx;
			color: #00A29A;
			margin-top: 50rpx;

			text {
				font-size: 40rpx;
				margin-right: 5rpx;
			}
		}

		.tishi {
			font-size: 24rpx;
			color: #999;
			margin-top: 70rpx;
		}
	}

	.choice-line {
		border-top: 1rpx solid #dcdcdc;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 40rpx;
	}

	.choice-line {
		border-top: 1rpx solid #dcdcdc;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 40rpx;
	}

	.choice_open {
		border-radius: 0 0 10rpx 10rpx;
		text-align: center;
		background-color: #2D9485;
		color: #FFFFFF;
	}

	.choice_zan {
		border-right: 1rpx solid #dcdcdc;
		text-align: center;
		color: #666666;
	}

	//
	.term-flex {
		display: flex;
		flex-wrap: wrap;
		margin-top: 25rpx;

		.term-flex-img {
			width: 180rpx;
			height: 180rpx;
			margin-right: 15rpx;
			border-radius: 10rpx;
		}

		.term-flex-tit {
			font-size: 30rpx;
			color: #333333;

		}

		.term-left {
			background: #D9F6FF;
			font-size: 24rpx;
			line-height: 45rpx;
			border-top-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			padding: 0 10rpx;
			color: #00A29A;
		}

		.term-right {
			border: 1rpx solid #00A29A;
			color: #00A29A;
			font-size: 24rpx;
			padding: 4rpx 15rpx;
		}
	}

	.buylist-bot {
		position: fixed;
		width: 100%;
		z-index: 100;
		height: 120rpx;

		background: #FFFFFF;
		color: #666666;
		border-top: 1rpx solid #dddddd;
		bottom: 0;
	}

	.buybtn {
		height: 76rpx;
		background-color: #2D9485;
		color: #FFFFFF;
		text-align: center;
		line-height: 76rpx;
		width: 294rpx;
		border-radius: 10rpx;
	}

	.buyhe {
		width: 30%;
		color: #FA4D4D;

		label {
			font-size: 38rpx;
		}

		image {
			width: 31rpx;
			height: 31rpx;
			margin-left: 10rpx;
		}
	}
</style>
